<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header">
    <!-- Include common header content -->
</head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="adminCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">Add Member</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toAdminMain}">Home</a></li>
                    <li class="breadcrumb-item"><a th:href="@{/member/selMember}">Member Management</a></li>
                    <li class="breadcrumb-item active">Add Member</li>
                </ol>

                <div class="card mb-4">
                    <!-- Member Form -->
                    <form th:action="@{/member/addMember}" method="post" name="addForm"
                          onsubmit="return beforeSubmit(this)">
                        <table class="table table-hover">
                            <tr>
                                <td text-align="center">Member Account/Card Number:</td>
                                <td><input type="text" class="form-control" placeholder="Auto-generated by the system"
                                           name="memberAccount" disabled="disabled"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Name:</td>
                                <td><input type="text" class="form-control" placeholder="Name" name="memberName"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Password:</td>
                                <td><input type="text" class="form-control" placeholder="Initial password: 123456"
                                           name="memberPassword" disabled="disabled"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Gender:</td>
                                <td><input type="text" class="form-control" placeholder="Gender" name="memberGender"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Age:</td>
                                <td><input type="text" class="form-control" placeholder="Age" name="memberAge"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Contact:</td>
                                <td><input type="text" class="form-control" placeholder="11-digit phone number"
                                           name="memberPhone"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Height:</td>
                                <td><input type="text" class="form-control" placeholder="cm" name="memberHeight"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Weight:</td>
                                <td><input type="text" class="form-control" placeholder="kg" name="memberWeight"></td>
                            </tr>
                            <tr>
                                <td text-align="center">Purchased Classes:</td>
                                <td><input type="text" class="form-control" placeholder="Purchased classes" name="cardClass"></td>
                            </tr>
                        </table>
                        <div style="text-align:center;margin-top:20px;margin-bottom:20px">
                            <input type="submit" class="btn btn-outline-success" value="Add">
                        </div>
                    </form>
                </div>
            </div>
        </main>
        <footer th:replace="adminCommon::common-footer"></footer>
    </div>
</div>

<!-- Include common scripts -->
<div th:include="adminCommon::common-scripts"></div>
<script type="text/javascript">
    // Form validation function
    function beforeSubmit(addForm) {
        let phone = /^[1][3,4,5,7,8,9][0-9]{9}$/; // Set phone number regex
        if (addForm.memberName.value == "") {
            alert("Please enter the name!");
            return false;
        }
        if (addForm.memberGender.value == "") {
            alert("Please enter the gender!");
            return false;
        }
        if (addForm.memberAge.value == "") {
            alert("Please enter the age!");
            return false;
        }
        if (!phone.test(addForm.memberPhone.value)) {
            alert("Incorrect phone number!");
            return false;
        }
        if (addForm.memberHeight.value == "") {
            alert("Please enter the height!");
            return false;
        }
        if (addForm.memberWeight.value == "") {
            alert("Please enter the weight!");
            return false;
        }
        if (addForm.cardClass.value == "") {
            alert("Please enter the purchased classes!");
            return false;
        }
        return true;
    }
</script>
</body>
</html>
